<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            position: absolute;
            top: 250px;
            left: 200px;
        }

        .box1 {
            width: 550px;
            height: 275px;
            border: 1px solid black;
            position: relative;
        }

        .box2 {
            margin-top: 50px;
            width: 550px;
            height: 275px;
            border: 1px solid black;
            position: relative;
            /* background-image: url(./img/pic1.jpg); */
        }

        .lefto {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 150px;
            left: 0px;
        }

        .leftt {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 150px;
            left: 0px;
        }

        .righto {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 150px;
            left: 530px;
        }

        .rightt {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 150px;
            left: 530px;
        }

        li {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: aqua;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="box1">
        <input type="button" value="<" class="lefto">
        <input type="button" value=">" class="righto">
        <ul class="dyig">
            <li class="one"></li>
            <li class="one"></li>
            <li class="one"></li>
            <li class="one"></li>
        </ul>
    </div>

    <div class="box2">
        <input type="button" value="<" class="leftt">
        <input type="button" value=">" class="rightt">
        <ul class="derg">
            <li class="two"></li>
            <li class="two"></li>
            <li class="two"></li>

        </ul>
    </div>
</body>

</html>
<script>
    class Lambo {
        constructor(obox, oleft, oright, olis) {
            this.obox = obox
            this.oleft = oleft
            this.oright = oright
            this.olis = olis
            this.jsq = null
            this.index = 0
            this.render()
            this.eve()
            this.redDot()
            this.lunbo()
        }
        render() {
            obox.style.backgroundImage = `url(./img/${this.index}.jpg)`
        }
        next() {
            this.index++
            if (this.index >= olis.length) {
                this.index = 0
            }
            this.render()
            this.redDot()

        }
        before() {
            this.index--
            if (this.index < 0) {
                this.index = olis.length - 1
            }
            this.render()
            this.redDot()

        }
        redDot() {
            for (let i = 0; i < this.olis.length; i++) {
                this.olis[i].style.background = 'aqua'
            }
            this.olis[this.index].style.background = 'red'
        }
        endian() {
            for (let i = 0; i < this.olis.length; i++) {
                this.olis[i].onclick = () => {
                    this.index = i
                    this.redDot()
                    this.render()
                }
            }

        }
        lunbo() {
            this.jsq = setInterval(() => {
                this.next()
            }, 1000)
        }
        eve() {
            this.oright.onclick = () => {
                this.next()
            }
            this.oleft.onclick = () => {
                this.before()
            }
            this.endian()
            this.obox.onmouseover = () => {
                clearInterval(this.jsq)
            }
            this.obox.onmouseout = () => {
                this.lunbo()
            }
        }
    }
    var obox = document.querySelector('.box1')
    var oleft = document.querySelector('.lefto')
    var oright = document.querySelector('.righto')
    var olis = document.querySelectorAll('.one')
    var t = new Lambo(obox, oleft, oright, olis)

    class Tambo {
        constructor(tbox, tleft, tright, tlis) {
            this.tbox = tbox
            this.tleft = tleft
            this.tright = tright
            this.tlis = tlis
            this.jsq = null
            this.index = 0
            this.render()
            this.eve()
            this.redDot()
            this.lunbo()
        }
        render() {
            tbox.style.backgroundImage = `url(./img/pic${this.index}.jpg)`
        }
        next() {
            this.index++
            if (this.index >= tlis.length) {
                this.index = 0
            }
            this.render()
            this.redDot()

        }
        before() {
            this.index--
            if (this.index < 0) {
                this.index = tlis.length - 1
            }
            this.render()
            this.redDot()

        }
        redDot() {
            for (let i = 0; i < this.tlis.length; i++) {
                this.tlis[i].style.background = 'aqua'
            }
            this.tlis[this.index].style.background = 'red'
        }
        endian() {
            for (let i = 0; i < this.tlis.length; i++) {
                this.tlis[i].onclick = () => {
                    this.index = i
                    this.redDot()
                    this.render()
                }
            }

        }
        lunbo() {
            this.jsq = setInterval(() => {
                this.next()
            }, 1000)
        }
        eve() {
            this.tright.onclick = () => {
                this.next()
            }
            this.tleft.onclick = () => {
                this.before()
            }
            this.endian()
            this.tbox.onmouseover = () => {
                clearInterval(this.jsq)
            }
            this.tbox.onmouseout = () => {
                this.lunbo()
            }
        }
    }
    var tbox = document.querySelector('.box2')
    var tleft = document.querySelector('.leftt')
    var tright = document.querySelector('.rightt')
    var tlis = document.querySelectorAll('.two')
    var t = new Tambo(tbox, tleft, tright, tlis)
</script>